<template>
  <div class="affiliation-wrap">
    <div class="search-box">
      <div class="key-box">
        <img src="../search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入姓名或联系方式" v-model="key" maxlength="11"/>
      </div>
      <button type="button" class="search-btn" @click="searchEmploy">搜索</button>
    </div>

    <div class="screen-box">
      <div class="open-box" @click="openModal">
        <img src="../screening.png" class="pic2" onclick="return false"/>
        <span class="all">{{title}}</span>
        <img src="../down.png" class="pic3" onclick="return false"/>
      </div>
    </div>

    <!--筛选-->
    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">
          <div class="sec" @click="queryScreen(-1,'全部')" :class="{'active2':type == -1}">全部
            <img src="../get.png" v-if="type == -1" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(2,'未报名')" :class="{'active2':type == 2}">未报名
            <img src="../get.png" v-if="type == 2" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(0,'在职')" :class="{'active2':type == 0}">在职
            <img src="../get.png" v-if="type == 0" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(1,'待入职')" :class="{'active2':type == 1}">待入职
            <img src="../get.png" v-if="type == 1" class="pic7" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>

    <div class="affiliation-box" ref="wrapper" v-if="showData == 1">
      <div class="affiliation-list">
        <div class="affiliation-con" v-for="(item,index) in affiliationList" :key="index" v-if="affiliationList.length">

          <div class="affiliation-item-box1">
            <img :src="item.userUrl" class="avatar-pic1" v-if="item.userUrl"/>
            <span class="avatar-pic2" v-else></span>
            <span class="username">{{item.userName}}</span>
            <img src="../../../assets/img/phone_icon.png" class="item-pic1" onclick="return false"
                 @click="callPhone(item.userTel)"/>
            <div class="next-pic-box" @click="openEmpEntryRecord(item.userId)">
              <img src="../in.png" class="next-pic" onclick="return false"/>
            </div>
          </div>

          <div class="affiliation-item-box4">
            <span class="item-title">邀请报名人数：</span><span class="work-num">{{item.num}}人</span>
          </div>

          <div class="affiliation-item-box5">
            <div class="item-remark-box">
              <span class="item-title">备注：</span>
              <span class="remark-con" v-show="item.remark">{{item.remark}}</span>
              <img src="./note.png" class="item-pic2" onclick="return false"
                   @click="openWriteRemark(item.id,item.type)"/>
            </div>
            <button type="button" class="recommend-btn" v-show="item.recStatus == 0"
                    @click="recommendPage(item.id,item.userId,item.type)">推荐
            </button>
          </div>
          <div class="line-box"></div>
        </div>

        <div class="more-box" v-if="noMoreData && showData == 1">没有更多了~</div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>

    <div class="write-remark-modal" v-show="showRemark" @click="closeModal"></div>
    <div class="write-remark-box" v-show="showRemark">
      <div class="title">编辑备注</div>
      <div class="write-remark-con">
        <div class="name-box">
          <input type="text" placeholder="请填写备注" v-model="noteVal" class="name" maxlength="10"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="writeRemark">确定</button>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import BScroll from 'better-scroll'
  import {getDeviceRatio, formatDate} from "../../../config/util"
  import backpage from "../../../components/backpage"
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    inject: ['reload'],
    data() {
      return {
        showModal: false,
        showData: 0,
        key: "",
        title: "全部",
        type: -1,
        affiliationList: [],
        affiliationScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        showRemark: false,
        noteVal: "",
        affiliationId: "",
        inviteType: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryAffiliationList();
    },
    methods: {
      queryScreen(key, val) {//根据筛选查询
        this.type = key;
        this.title = val;
        this.showModal = false;
        this.currentPage = 1;
        this.PageSize = 20;
        this.affiliationList = [];
        this.queryAffiliationList(() => {
          this.$nextTick(() => {
            this.affiliationScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      queryAffiliationList(callback) {//查询员工归属管理列表
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/invite/get_employee_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/invite/get_employee_list?sgin=" + this.userSign + "&key=" + this.key + "&type=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time + "&versionType=2.4").then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.affiliationList = resultObj.data;

              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.affiliationScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.affiliationScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      searchEmploy() {//根据key查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryAffiliationList(() => {
          this.$nextTick(() => {
            this.affiliationScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/invite/get_employee_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);
          setTimeout(() => {
            this.axios.get(baseUrl + "/invite/get_employee_list?sgin=" + this.userSign + "&key=" + this.key + "&type=" + this.type + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time + "&versionType=2.4").then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.affiliationList = this.affiliationList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.affiliationScroll) {
          this.affiliationScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.affiliationScroll.refresh();
        }
      },
      enable() {
        this.affiliationScroll && this.affiliationScroll.enable()
      },
      refresh() {
        this.affiliationScroll && this.affiliationScroll.refresh()
      },
      finishPullUp() {
        this.affiliationScroll && this.affiliationScroll.finishPullUp()
      },
      callPhone(mobile) {
        window.location.href = 'tel://' + mobile;
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      },
      recommendPage(id, userId, type) {//推荐页
        this.$router.push({
          path: "/recommendPeople",
          query: {"affiliationId": id, "userId": userId, "inviteType": type}
        });
      },
      openWriteRemark(id, type) {//备注
        this.showRemark = true;
        this.affiliationId = id;
        this.inviteType = type;
      },
      closeModal() {
        this.showRemark = false;
      },
      writeRemark() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/invite/update_emp_remark?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/invite/update_emp_remark?sgin=" + this.userSign + "&type=" + this.inviteType + "&remark=" + this.noteVal + "&id=" + this.affiliationId + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          this.showRemark = false;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("编辑备注失败，请重试", "middle");
            } else {
              this.currentPage = 1;
              this.PageSize = 20;
              this.queryAffiliationList(() => {
                this.$nextTick(() => {
                  this.affiliationScroll = null;
                  this.noMoreData = false;
                  this.initScroll();
                });
              });
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openEmpEntryRecord(userId) {
        this.$router.push({path: "/empentryrecord", query: {"userId": userId}});
      }
    },
    watch: {
      affiliationList() {
        this.$nextTick(() => {
          this.affiliationScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .affiliation-wrap
    wh(100%, auto)
    background: rgba(242, 242, 242, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      .key-box
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(73.07%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(204, 204, 204, 1))
      .search-btn
        margin-left: auto
        margin-right: 0.333rem
        wh(1.44rem, 0.72rem)
        line-height: 0.72rem
        border: 0.027rem solid rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        size-color(0.4rem, rgba(255, 255, 255, 1))
        background: rgba(60, 175, 255, 1)
        text-align: center
    .screen-box
      display: flex
      align-items: center
      wh(100%, 0.8rem)
      .open-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        margin-left: 0.293rem
        .pic2
          margin-right: 0.173rem
          wh(0.48rem, 0.48rem)
        .all
          size-color(0.373rem, rgba(102, 102, 102, 1))
          margin-right: 0.12rem
        .pic3
          wh(0.32rem, 0.32rem)
    .screen-modal
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, auto)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
            &:last-child
              margin-bottom: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .affiliation-box
      position: fixed
      top: 2rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      overflow: hidden
      background: rgba(242, 242, 242, 1)
      .affiliation-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .affiliation-con
          display: flex
          flex-direction: column
          wh(100%, auto)
          background: rgba(255, 255, 255, 1)
          .affiliation-item-box1
            margin-left: 0.32rem
            border-bottom: 0.027rem solid #f2f2f2
            wh(96.8%, 1.333rem)
            display: flex
            align-items: center
            .avatar-pic1
              wh(0.88rem, 0.88rem)
              border-radius: 50%
            .avatar-pic2
              wh(0.88rem, 0.88rem)
              border-radius: 50%
              background: #F2F2F2
            .username
              ellipsis()
              width: 2.3rem
              padding-left: 0.32rem
              padding-top: 0.05rem
              padding-bottom: 0.05rem
              size-color(0.427rem, #333)
              font-weight: 500
            .item-pic1
              padding-left: 0.48rem
              wh(0.533rem, 0.533rem)
            .next-pic-box
              margin-left: auto
              margin-right: 0.32rem
              wh(1.6rem, 0.8rem)
              line-height: 0.8rem
              text-align: right
              .next-pic
                wh(0.32rem, 0.32rem)
          .affiliation-item-box4
            padding-top: 0.4rem
            .work-num
              size-color(0.373rem, #3CAFFF)
          .affiliation-item-box5
            height: 0.8rem
            display: flex
            align-items: center
            padding-bottom: 0.267rem
            .item-remark-box
              display: flex
              align-items: center
              .remark-con
                size-color(0.373rem, #666)
                padding-right: 0.32rem
              .item-pic2
                wh(0.347rem, 0.347rem)
            .recommend-btn
              margin-left: auto
              margin-right: 0.32rem
              wh(1.6rem, 0.8rem)
              border: 0.027rem solid rgba(60, 175, 255, 1)
              border-radius: 0.16rem
              background: #FFF
              size-color(0.4rem, rgba(60, 175, 255, 1))
          .item-title
            padding-left: 0.32rem
            size-color(0.373rem, rgba(153, 153, 153, 1))
          .line-box
            wh(100%, 0.267rem)
            background :rgba(242, 242, 242, 1)
        .more-box
          text-align: center
          margin-top: 0.64rem
          padding-bottom: 0.8rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
    .write-remark-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .write-remark-box
      position: fixed
      top: 1.333rem
      left: 0
      right: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .write-remark-con
        display: flex
        align-items: center
        padding-bottom: 0.4rem
        justify-content: center
        .name-box
          display: flex
          align-items: center
          wh(6.88rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
